<template>
  <div id="SysAdmin">
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-input style="width:200px;margin-right: 10px" prefix-icon="el-icon-search" placeholder="请输入管理员姓名"></el-input>
        <el-button icon="el-icon-search" circle></el-button>
      </div>
      <div>
        <el-button type="success" icon="el-icon-plus" size="small" @click="handleEdit">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" size="small" @click="batchDelete" :disabled="this.multipleSelection.length==0">批量删除</el-button>
      </div>
    </div>
    <div class="bodercass">
      <el-table
          :data="admin"
          stripe
          border
          style="width: 100%"
          v-loading="loading" border element-loading-text="拼命加载中"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="admimId"
            label="管理员编号"
            width="250">
        </el-table-column>
        <el-table-column
            prop="adminuser"
            label="用户名"
            width="250">
        </el-table-column>
        <el-table-column
            prop="adminPhone"
            label="手机号"
            width="250">
        </el-table-column>
        <el-table-column
            prop="roleId"
            label="角色ID">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="350">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" round>修改</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="handDelete(scope.$index, scope.row)" round>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
<!--      <el-pagination
          background
          layout="size,prev, pager, next, jumper, ->, total"
          :total="10">
      </el-pagination>-->
      </div>
      <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="30%"
          >
        <div>
          <div hidden="hidden">
            <el-tag hidden="hidden">管理员编号</el-tag>
          <el-input v-model="updatePos.admimId" size=small class="updatePosInput" hidden="hidden"></el-input>
          </div>
          <div>
          <el-tag>用户名</el-tag>
          <el-input v-model="updatePos.adminuser" size=small class="updatePosInput"></el-input>
          </div>
          <div>
          <el-tag>手机号</el-tag>
          <el-input v-model="updatePos.adminPhone" size=small class="updatePosInput"></el-input>
          </div>
          <div>
          <el-tag>角色ID</el-tag>
          <el-input v-model="updatePos.roleId" size=small class="updatePosInput"></el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size=small>取 消</el-button>
      <el-button type="primary" @click="doupdate" size=small>确 定</el-button>
      </span>
      </el-dialog>
  </div>
  </div>
</template>

<script>
  import {request} from "../../utils/api";

  export default {
    name: "SysAdmin",
    data(){
      return{
        admin:[], //定义显示数据所有集合
        loading: false, //是显示加载
        dialogVisible:false, //判断修改和增加对话框是否打开,默认为关闭
        title:"", //修改和增加对话框的标题
        updatePos:{
          admimId:'',
          adminuser:'',
          adminPhone:'',
          roleId:'',
        },
        multipleSelection: [],//存放选择的多选框中的数据
        //total:5, //总数据,默认为5条
      }
    },
 /*   computed(){
      page:this.total/this.rows
    },*/
    //生命周期,初始化页面显示所有数据
    mounted() {
      this.initfindAll()
    },
    methods:{
      //删除
      handDelete(index,data){
        this.$confirm('此操作将永久删除该管理员编号为'+data.admimId+'的数据 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
                url:"/deleteadmim/"+data.admimId,
              }
          ).then(res=>{
            if (res=="success"){
              this.initfindAll()
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
            }else {
              this.$message.error('删除失败！')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //显示所有数据方法
      initfindAll(){
        request({
          url:"/adminAll"
        }).then(res =>{
          if (res){
            console.log(res)
            this.admin = res;
          }
        });
      },
      //打开增加或修改页面
      handleEdit: function(index, row) {
        this.dialogVisible=true;
        if (row != undefined && row != 'undefined') {
          this.title = '修改管理员信息'
          this.updatePos.admimId = row.admimId
          this.updatePos.adminuser = row.adminuser
          this.updatePos.adminPhone = row.adminPhone
          this.updatePos.roleId = row.roleId
        } else {
          this.title = '增加管理员信息'
          this.updatePos.adminuser = ''
          this.updatePos.adminPhone = ''
          this.updatePos.roleId = ''
        }
      },
      //增加或修改
      doupdate(){
        if (this.title=='修改管理员信息'){
          request({
                url:"/updateadmim",
                params:{
                  admimId:this.updatePos.admimId,
                  adminuser:this.updatePos.adminuser,
                  adminPhone:this.updatePos.adminPhone,
                  roleId:this.updatePos.roleId
                }
              }
          ).then(res=>{
            if (res=="update success"){
              this.initfindAll()
              this.dialogVisible=false;
              this.$message({
                type: 'success',
                message: '修改成功！'
              })
            }else {
              this.$message.error('修改失败！')
            }
          })
        }else {
          request({
                url:"/addadmim",
                params:{
                  adminuser:this.updatePos.adminuser,
                  adminPhone:this.updatePos.adminPhone,
                  roleId:this.updatePos.roleId
                }
              }
          ).then(res=>{
            if (res=="add success"){
              this.initfindAll()
              this.dialogVisible=false;
              this.$message({
                type: 'success',
                message: '增加成功！'
              })
            }else {
              this.$message.error('增加失败！')
            }
          })
        }
      },
      //判断选中的状态
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量删除
      batchDelete(){
        this.$confirm('此操作将永久删除'+this.multipleSelection.length+'条数据 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let admimStr='';
          this.multipleSelection.forEach(item=>{
            admimStr+=item.admimId+',';
          })
          request({
                url:"/batchDel/"+admimStr,
              }
          ).then(res=>{
            if (res=="success"){
              this.initfindAll()
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
            }else {
              this.$message.error('删除失败！')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style scoped>
  .bodercass{
    margin-top: 18px;
  }
  .updatePosInput{
    width: 200px;
    margin-left: 8px;
  }
</style>